<template>
    <div class="team-header-box relative">
        <ul>
            <li class="pointer text-header-box" style="z-index: 500;">
                <p class="name add-button" v-text="'+'" @click.stop="addFun(true)"></p>
            </li>
            <li class="text-header-box" v-for="(userInfo,key) in showList" :key="key"
                :style="{left:16 + 15*key + 'px','z-index':500 - (key + 1)}">
                <img v-if="userInfo.img">
                <p v-if="!userInfo.img" class="name" v-text="userInfo.name"></p>
            </li>
            <li v-if="showNumber" class="text-header-box number-box">
                <p class="name user-number" v-text="userList.length - 3"></p>
            </li>
        </ul>
    </div>
</template>

<script>
  export default {
    name: "TeamUserHeader",
    data() {
      return {
        showNumber: false,
        showList: []
      }
    },
    props: {
      addFun:{
        type: Function,
        default: function () {
        }
      },
      userList: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    created() {
      if (this.userList.length > 3) {
        this.showList = this.userList.slice(0, 3)
        this.showNumber = true
      }else{
        this.showList = this.userList
        this.showNumber = false
      }
    }

  }
</script>

<style scoped>
    .team-header-box {
        width: 104px;
    }

    .team-header-box .text-header-box {
        height: 30px;
        width: 30px;
        background-image: linear-gradient(180deg, #1E87F0 0%, #4690F5 100%);
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        line-height: 30px;
        position: absolute;
    }

    .team-header-box .number-box {
        right: 0;
        background: #FFFFFF;
        border: 1px solid #D8D9E5;
    }

    .team-header-box .text-header-box .add-button {
        font-size: 24px !important;
        font-weight: bold;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: -1px;
    }

    .team-header-box .text-header-box .name {
        font-size: 10px;
        color: #FFFFFF;
        letter-spacing: 0.71px;
        text-align: center;
    }

    .team-header-box .text-header-box .user-number {
        font-size: 14px !important;
        color: #6D6E8C !important;
        letter-spacing: 1px !important;

    }

</style>
